<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link rel="stylesheet" href="../css/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<!-- <script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/vant.min.js"></script> -->
		<script src="../js/vue-lazyload.js"></script>
		<script src="html5plus://ready"></script>
		<script src="js/listener_other.js"></script>
		<script src="../js/ajax.js"></script>
		<title>我的收藏</title>
	</head>
	<body>
		<div id="app">
			<van-nav-bar title="我的收藏" left-arrow @click-left="onClickLeft">
			</van-nav-bar>
			<van-badge-group>
				<van-badge title="收藏列表" />
			</van-badge-group>
			<div style="margin: 10px;" v-for="good in Goods">
				<van-row style="margin: 10px;"  >
					<van-col span="8">
						<img :src="good.GoodsImageUrl" width="90%" style="height: 100px;" onerror="this.src='../img/shopping_default_1.jpg'"/>
					</van-col>
					<van-col span="16">
						<div style="font-size: 14px">{{good.GoodsName}}</div>
						<div>
							<span style="color: red;font-size: 18px;"> ￥{{good.RealPrice}}</span>
							<span><em style="text-decoration: line-through;font-size: 12px;color: #C8C9CC;">价格￥{{good.MarketPrice}}</em></span>
						</div>
						<div>
							<span style="font-size: 12px;color: #C8C9CC; "> 累计销量{{good.SaleCount}}</span>
							<span style="float: right; font-size: 12px; color: #C8C9CC;"> {{good.BrowseCount}} 次浏览</span>
						</div>
					</van-col>
					
				</van-row>
				<div slot="footer" style="margin-left: 75%;">
				<van-button size="small" type="danger" @click="cancel(good.GoodsId)">取消收藏</van-button>
				
				</div>
			</div>
			
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					checked:true,
					Key:"",
					Goods:[]
				},
				methods:{
					onClickLeft:function(){
						plus.webview.close(plus.webview.currentWebview().id)
					},
					cancel:function(n){
						
						ajax({
						url:"http://dsapi.ysd3g.com/api/cancelCollectGoods",
						dataType:"JSONP",
						data:{
							key:localStorage.getItem("Key"),
							goodsId:n
						},
						success:function(res){
							if(!res.Error){
								alert("取消成功！")
								setTimeout(function(){
									plus.webview.currentWebview().reload();
								},500)
								
							}else{
								alert("取消失败！")
							}
						}
						
						});
					},
				},
				mounted(){
					var _this=this;
					if (localStorage.getItem("Key") != null) {
						_this.Key = localStorage.getItem("Key");
					}
					ajax({
						url:"http://dsapi.ysd3g.com/api/MyGoodsCollectList",//收藏接口
						dataType:"jsonp",
						data:{
							p:1,
							key:localStorage.getItem("Key")
						},
						success:function(res){
							
							if(res.Error==false){
								console.log(res)
								_this.Goods=res.Data
							}else{
								_this.$toast.fail(res.Msg)
							}
						}
					})
				}
			})
		</script>
	</body>
</html>